<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>v-if</h1>
    <h1 v-if="ok">YES</h1>
    <h1 v-else>NO</h1>

    <h1>在&lt;template&gt;元素上使用v-if条件渲染分组</h1>

    <template v-if="ok">
        <h1>沈</h1>
        <p>佳</p>
        <p>佳</p>
    </template>

    <h1>v-else</h1>
    <div v-if="Math.random()>0.5">
        偷看我
    </div>
    <div v-else>
        算你听话
    </div>
    <h1>v-else-if</h1>
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'c'">
        C
    </div>

    <div v-else>
        Not A/B/C
    </div>

    <h1>key值管理可复用的元素</h1>
    <button v-on:click="changetype">change</button>

    <template v-if="loginType === 'username'">
        <label>UserName</label>
        <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </template>

    <h1>v-show</h1>
    <h2 v-show="ok">hello</h2>
</div>


<script>
    var vm=new Vue({
        el:'#app',
        data:{
            ok:true,
            type:'A',
            loginType:'username'
        },
        methods:{
            changetype:function () {
                this.loginType=this.loginType==='username'?'email':'username';



            }
        }
    })
</script>

</body>
</html>